<template>
  <div>
    <div class="pages-tool">
       <div class="page-item" v-for="(item, index) in pages" :key="index" :class="[index === activeIndex ? 'isActive' : '']" @click="changePage(index)">{{ item.label }}</div>
    </div>
  </div>
</template>

<script>
const isDecimal = function(num) {
    return num % 1 !== 0
}
export default {
  props: {
    total: {
      type: Number,
      default() {
        return 0
      }
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
   computed: {
    pages() {
      const arr = []
      const limit = 50;
      const items = Math.ceil(this.total / limit)
      const remain = this.total % limit
      for (let i = 0; i < items; i++) {
        arr.push({
            index: i,
            label:1 + i * limit + '-' +(i < items - 1 ? (i + 1) * limit : i * limit + remain) + '条',
            start: 1 + i * limit,
            end: i < items - 1 ? (i + 1) * limit : i * limit + remain
        })
      }
      return arr
    }
  },
  created() {
    // this.queryHistoryList()
  },
  methods: {
    changePage(index) {
        this.activeIndex = index
        const { start, end } = this.pages[index]
        this.$emit('changePage', { start, end })
    }
  }
}
</script>
<style lang="scss" scoped>
 .pages-tool{
    text-align: center;
    display: flex;
    justify-content: space-around;
    .page-item{
        cursor: pointer;
    }
    .isActive{
        color: #409eff;
    }
 }
</style>
